<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>小小城系统 | 首页</title>
    <div th:replace="./common/include_header :: copyright"></div>
    <script>
        var nthTabs;
        $(function () {
            //一个低门槛的演示,更多需求看源码
            //基于bootstrap tab的自定义多标签的jquery实用插件，滚动条依赖jquery.scrollbar，图标依赖font-awesome
            nthTabs = $("#editor-tabs").nthTabs();
            nthTabs.addTab({
                id: 'tab_main',
                title: '数据查询',
                content: "<iframe name=\"mainFrame\" id=\"mainFrame_main\" src=\"/query/main\" frameborder=\"false\" scrolling=\"auto\" style=\"border:none;\" width=\"100%\" height=\"auto\" allowtransparency=\"true\"></iframe>",
            }).setActTab("#tab_main");
            //重置iframe高度，否则显示过窄
            $("#mainFrame_main").load(function () {
                $(this).height($(window).height() - 120);
            });
            //禁止滚动条
            $(document.body).css({
                "overflow-x": "hidden",
                "overflow-y": "hidden"
            });
            $("a:contains('数据查询')").addClass("active");
        });

        //增加tab
        function addTab(id, title, src) {
            var tabList = nthTabs.getTabList();
            var flag = false;
            for (var i = 0; i < tabList.length; i++) {
                var newTab = '#tab_' + id;
                if (newTab == tabList[i].id)
                    flag = true;
            }
            if (flag) {
                nthTabs.setActTab("#tab_" + id);
            } else {
                nthTabs.addTab({
                    id: 'tab_' + id,
                    title: title,
                    content: "<iframe id=\"mainFrame_" + id + "\" name=\"mainFrame\" src=\"" + src + "\" frameborder=\"false\" scrolling=\"auto\" style=\"border:none;\" width=\"100%\" height=\"auto\" allowtransparency=\"true\"></iframe>",
                }).setActTab("#tab_" + id);
                $("#mainFrame_" + id).load(function () {
                    $(this).height($(window).height() - 120);
                });
            }
            $("a").removeClass("active");
            $("a:contains('" + title + "')").addClass("active");

        };
        //刷新缓存
        function refreshCache() {
            $.ajax({
                type: "POST",
                url: "/cache/refreshCache",
                success: function (data) {
                    swal(
                        'success！',
                        '缓存已刷新',
                        'success'
                    );
                },
                error: function () {
                    swal(
                        'error',
                        '缓存刷新失败。',
                        'error'
                    );
                }
            })
        };
    </script>
    <style type="text/css">
        .dropdown-menu {
            left: -120px;
        }

        .nav-tabs > li {
            padding-left: 15px;
            padding-right: 15px;
            border: 1px solid #ebebeb;
        }

        .nav-tabs > li > .active {
            font-weight: bold;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <div th:replace="./common/top :: copyright"></div>
    <div th:replace="./common/left :: copyright(${userType})"></div>
    <!-- Content Wrapper. 其他页面替换的地方-->
    <div class="content-wrapper">
        <div class="nth-tabs" id="editor-tabs"></div><!--使用时只需此标签，class固定,id自定义-->
    </div>
    <!-- /.content-wrapper end-->
    <div th:replace="./common/footer :: copyright"></div>
    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
</body>
</html>
